<template>
	<view class="orderPageContainer_rich">
		<view class="status-section-rich">
			<image :src="returnOrderConfigCnObj('img')" class="icon" />
			<text class="label-text-rich'">订单状态：{{ returnOrderConfigCnObj('title') }}</text>
		</view>

		<!-- 地址 -->
		<view class="address-section-rich">
			<view class="order-content-rich">
				<text class="yticon icon-shouhuodizhi-rich"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{ newProductObj.realname }}</text>
						<text class="mobile">{{ newProductObj.telephone }}</text>
					</view>
					<text class="address">{{ newProductObj.addressStr }}</text>
				</view>
			</view>
			<image src="static/line11.png" class="a-bg" />
		</view>

		<view class="goods-section-rich">
			<view class="g-header-rich b-b">
				<text class="name">商品信息</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item-rich" @click="goToProductDetail(newProductObj.productId)">
				<image :src="newProductObj.mainImageUrl"></image>
				<view class="right">
					<text class="title clamp">{{ newProductObj.productName }}</text>
					<text class="spec">{{ newProductObj.skuTitle }}</text>
					<view class="price-box-rich">
						<text class="price">￥{{ newProductObj.salePrice }}</text>
						<text class="number">x 1</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 金额明细 -->
		<view class="yt-list-rich">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单编号</text>
				<text class="cell-tip">{{ newProductObj.orderId }}</text>
			</view>

			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">提交时间</text>
				<text class="cell-tip">{{ newProductObj.createTime }}</text>
			</view>

			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品合计</text>
				<text class="cell-tip">￥{{ newProductObj.salePrice }}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">支付模式：</text>
				<text
					class="cell-tip">{{ newProductObj.isBuyOutOrSend == 4 ? '租完即送' : newProductObj.isBuyOutOrSend == 5?'租完买断':'' }}</text>
			</view>
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<text class="cell-tip">{{ userOrdersDtoObj.remark }}</text>
			</view>
		</view>
		<PartyCover @partCoverCall="partCoverCall" ref="partCover" />
		<view class="fix-button">
			<u-button @click="gotoServerMan">订单咨询</u-button>
		</view>
	</view>
</template>
<script>
	import {
		orderStatusDesc,
		已支付,
		逾期已支付
	} from '../../utils/constant';
	import {
		checkOrderNeedPay,
		checkOrderHasDone,
		checkOrderHasClose
	} from '../../components/orderItem/orderActionBtns/utils/checkShowBtn';
	import {
		getProductYunfeiText,
		returnProductMaiduanStatus,
		makeAdd,
		getDateValueOf,
		getUserId
	} from '../../utils/index';
	import {
		tradePay
	} from '../../utils/platform';
	import PartyCover from '../../components/partyCover';
	export default {
		data() {
			return {
				orderId: '', // 订单ID
				orderDetailObj: {}, // 商品详情对象数据
				restTimeStamp: 0, // 付款剩余时间的时间戳
				loading: true, // 是否正在加载中
				productshow: false,
				orderProductDetailDtoObj: {},
				statuss: '',
				newProductObj: {},


				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,


				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},
		components: {
			PartyCover
		},
		computed: {
			/**
			 * 返回订单的对象，会确保它一定是个对象
			 */
			userOrdersDtoObj: function() {
				return this.orderDetailObj?.userOrdersDto || {};
			},
			/**
			 * 返回订单的账单列表数据，会保证它一定是一个数组
			 */
			orderByStagesDtoList: function() {
				return this.orderDetailObj?.orderByStagesDtoList || [];
			},
			/**
			 * 地址对象
			 */
			orderAddressDtoObj: function() {
				return this.orderDetailObj?.orderAddressDto || {};
			},
			/**
			 * 判断订单是否关闭
			 */
			orderHasClose: function() {
				return checkOrderHasClose(this.userOrdersDtoObj);
			}
		},
		onLoad(opt) {
			this.orderId = opt && opt.orderId;
			if (this.$checkIsPageLessParameter(opt, ['orderId'])) return; // 如果URL传参没有订单ID数据的话，那么做出提示
			this.fetchOrderDetailData();
			this.eventId = this.$eventEmitter.subscribe('refreshOrderDetail_jsjk12', this
				.fetchOrderDetailData); // 注册刷新账单详情页面的监听事件
		},
		onShow() {
			this.tid && clearInterval(this.tid);
			this.daojishi(); // 有必要倒计时的话会进行倒计时。之所以需要在onShow里面调用是因为小程序进入后台的话，那么倒计时会停止或者变慢
		},
		onUnload() {
			this.tid && clearInterval(this.tid);
			this.$eventEmitter.removeHandler('refreshOrderDetail_jsjk12', this.eventId);
		},
		methods: {
			/**
			 * 订单倒计时的处理方法
			 */
			daojishi() {
				return false; //此处原来老代码出现死循环 所以暂时直接跳出
				if (this.checkShowQuZhiFu()) {
					// 如果是处于付款订单状态的订单的话，那么加载进行倒计时操作
					this.restTimeStamp = this.computeRestTime(); // 起始的剩余时间
					if (this.restTimeStamp <= 0) {
						this.tid && clearInterval(this.tid);
						this.fetchOrderDetailData(false);
						return;
					}
					const interval = 1000;
					this.tid = setInterval(() => {
						this.restTimeStamp = this.restTimeStamp - interval; // 倒计时
						if (this.restTimeStamp <= 0) {
							clearInterval(this.tid);
							this.fetchOrderDetailData(false);
						}
					}, interval);
				}
			},

			/**
			 * 加载订单详情数据
			 */
			fetchOrderDetailData(showLoading = true) {
				console.log('点击了查看订单详情2');
				this.loading = true;
				let that = this;
				showLoading &&
					uni.showLoading({
						title: '加载中'
					});
				this.$request(
						'order/mall/api/order/selectUserOrderNewDetail', {
							orderId: this.orderId,
							uid:getUserId(),
						},
						'POST',
						false
					)
					.then((res) => {
						console.log('----新商品详情----', res);
						if (res.businessSuccess || res.success) {
							this.newProductObj = res.data || {};
						}
						return;
						const resData = res.data;
						this.orderDetailObj = resData;
						console.log('点击了查看订单详情3', this.orderDetailObj);
						const cashObj = resData?.userOrderCashesDto;
						this.statuss = res.data.userOrdersDto.status;
						const zongzujin = cashObj?.totalRent;
						this.orderProductDetailDtoObj = this.orderDetailObj.orderProductDetailDto;
						this.$setGlobalData('zongzujinshuju0712', zongzujin);
						//if(showLoading){
						that.daojishi();
						this.productshow = true;
						//}
					})
					.finally(() => {
						showLoading &&
							uni.hideLoading({
								title: '加载中'
							});
						this.loading = false;
					});
				console.log('点击了查看订单详情4', this.orderDetailObj);
			},

			/**
			 * 返回订单的中文状态描述
			 */
			returnOrderConfigCnObj(key) {
				const {
					status
				} = this.newProductObj;
				const obj = orderStatusDesc[status] || {};
				return obj[key];
			},

			/**
			 * 判断是否需要现在去支付按钮
			 */
			checkShowQuZhiFu() {
				return checkOrderNeedPay(this.userOrdersDtoObj);
			},
			/**
			 * 计算待付款状态还有多少时间
			 */
			computeRestTime() {
				const orderCreateTime = this.userOrdersDtoObj?.createTime; // 订单创建时间
				const [timeStamp] = getDateValueOf(orderCreateTime); // 订单创建时间的时间戳
				const currentStamp = Date.now(); // 当前时间戳
				const rest = currentStamp - timeStamp; // 当前所剩余的时间戳
				const duration = 30 * 60 * 1000; // 待支付状态所持续时间
				return duration - rest;
			},
			partCoverCall() {
				this.fetchOrderDetailData(false);
			},
			goToProductDetail(productId) {
				uni.navigateTo({
					url: '/pagesClass-rich/product/product?productId=' + productId
				});
			},
			gotoServerMan() {
				uni.setStorageSync(
					'order',
					JSON.stringify({
						orderId: this.newProductObj.orderId,
						image: this.newProductObj.mainImageUrl,
						name: this.newProductObj.productName,
						price: this.newProductObj.salePrice,
						orderNum: 1,
						createTime: this.newProductObj.createTime
					})
				);
				uni.navigateTo({
					url: '/pages/chat/chat'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.orderPageContainer_rich {
		background: #f1f1f1;
		box-sizing: border-box;
		padding-bottom: 80rpx;
		min-height: 100vh;
		position: relative;

		.status-section-rich {
			display: flex;
			align-items: center;
			padding: 30upx;
			height: 100upx;
			@include global-background-color-red();


			.icon {
				width: 48upx;
				height: 48upx;
			}

			.label-text-rich {
				color: #fff;
				margin-left: 30upx;
			}
		}

		.address-section-rich {
			background: #fff;
			position: relative;
			padding: 30upx 0;

			.order-content-rich {
				display: flex;
				align-items: center;
			}

			.icon-shouhuodizhi-rich {
				font-size: 44upx;
				width: 90upx;
				color: #888;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.cen {
				font-size: 32upx;
				display: flex;
				flex-direction: column;
				flex: 1;
				color: #333;
			}

			.name {
				font-size: 34upx;
				margin-right: 24upx;
			}

			.address {
				color: #333;
				margin-top: 16upx;
				margin-right: 20upx;
			}

			.icon-you {
				font-size: 32upx;
				margin-right: 30upx;
				color: #333;
			}

			.a-bg {
				width: 100%;
				height: 5upx;
				position: absolute;
				left: 0;
				bottom: 0;
				display: block;
			}
		}

		.goods-section-rich {
			margin-top: 16upx;
			padding-bottom: 1px;
			background: #fff;

			.g-header-rich {
				height: 84upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				position: relative;
			}

			.logo {
				width: 50upx;
				height: 50upx;
				display: block;
				border-radius: 100px;
			}

			.name {
				margin-left: 24upx;
				font-size: 30upx;
				color: #606266;
			}

			.g-item-rich {
				display: flex;
				margin: 20upx 30upx;

				image {
					width: 140upx;
					height: 140upx;
					flex-shrink: 0;
					display: block;
					border-radius: 4upx;
				}

				.right {
					flex: 1;
					overflow: hidden;
					padding-left: 24upx;
				}

				.title {
					margin-bottom: 10rpx;
					white-space: pre-wrap;
					font-size: 30upx;
					color: #303133;
					word-break: break-all;

				}

				.spec {
					font-size: 26upx;
					color: #909399;
				}

				.price-box-rich {
					padding-top: 10upx;
					font-size: 32upx;
					color: #303133;
					display: flex;
					align-items: center;


					.price {
						margin-bottom: 4upx;
					}

					.number {
						font-size: 26upx;
						color: #606266;
						margin-left: 20upx;
					}
				}
			}
		}

		.yt-list-rich {
			margin-top: 16rpx;
			background: #fff;

			.yt-list-cell {
				position: relative;
				padding: 10upx 30upx 10upx 40upx;
				display: flex;
				align-items: center;
				line-height: 70upx;


				&.cell-hover {
					background: #fafafa;
				}

				&.b-b:after {
					left: 30upx;
				}

				.cell-tit {
					flex: 1;
					font-size: 26upx;
					color: #909399;
					margin-right: 10upx;
				}

				.cell-tip {
					font-size: 26upx;
					color: #303133;

					&.disabled {
						color: #909399;
					}

					&.active {
						color: #fa436a;
					}

					&.red {
						color: #fa436a;
					}
				}

				&.desc-cell {
					.cell-tit {
						max-width: 90upx;
					}
				}

				.desc {
					flex: 1;
					font-size: 24upx;
					color: #303133;
				}
			}
		}

		.danban {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 30rpx;
			background: #fff;
			z-index: 15;
		}

		.fix-button {
			position: fixed;
			bottom: 40rpx;
			right: 40rpx;

			.u-btn {
				font-size: 28rpx;
				background-color: #f35111;
				color: #fff;
				padding: 20rpx 30rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
</style>